<template>
	<view class="content">
		<view class="filter-nav">
			<text :class="{'active' : nav==='all'}" @click="nav = 'all'">全部订单</text>
			<text :class="{'active' : nav==='comment'}" @click="nav = 'comment'">待评价</text>
			<text :class="{'active' : nav==='refund'}" @click="nav = 'refund'">退款</text>
		</view>
		<view class="history-list">
			
			<view class="item" v-for="(item,index) in historyList" :key="item.orderId">
				<view class="store-info">
					<image :src="item.shopPicture"></image>
					<view class="name-statues">
						<text class="store-name">{{item.shopName}}</text>
						<text class="statues">{{item.status}}</text>
					</view>
				</view>
				<view class="dish-lish">
					<!-- <view class="dish-item" v-for="(item,index) in item.dishes" :key="index">
						<image class="dish-image" src=""></image>
						<text class="dish-name">菜名</text>
						<view class="price-count">
							<text class="price">$15</text>
							<text class="count">共一件</text>
						</view>
					</view> -->
				</view>
				<view class="date-sum">
					<text class="date">{{item.createTime}}</text>
					<text class="sum">合计{{item.totalCost}}</text>
				</view>
				<view class="detail-operate">
					<text class="detail">更多</text>
					<button class="operate">取消订单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>	
import { reactive, ref } from "vue";
import request from "@/Api/request.js"
let historyList = reactive([]);
const nav = ref("all");
request({
		url: `/order/${nav.value}`,
		method: "GET"
	}).then((res) => {
		for (let i of res) {
			historyList.push(i)
		}
		console.log(res);
	})
</script>

<style lang="scss" scoped>
	.filter-nav{
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
	}
	
	.active{
		color: #333;
		font-weight: 500;
	}
	
	.history-list{
		padding: 32rpx 0;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		
		.item{
			background: #fff;
			padding: 32rpx;
			border-radius: 24rpx;
			.store-info{
				display: flex;
				justify-content: space-between;
				
				image{
					width: 96rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}
				
				.store-name{
					font-size: 26rpx;
					font-weight: 500;
					color: #666666;
				}
				
				.statues{
					font-size: 24rpx;
					font-weight: 400;
					color: #53BD11;
				}
			}
			
			.dish-list{
				margin: 24rpx 0 32rpx;
				
				.dish-item{
					position: relative;
					.dish-image{
						width: 88rpx;
						height: 88rpx;
						margin-right: 16rpx;
					}
					.dish-name{
						font-size: 28rpx;
						font-weight: 500rpx;
					}
					.price-count{
						display: flex;
						flex-direction: column;
						position: absolute;
						right: 0;
						.price{
							font-size: 28rpx;
							font-weight: 600;
							color: #333333;
						}
						.count{
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}
					}
				}
			}
			
			.date-sum{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.data{
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
				.sum{
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
				}
			}
			
			.detail-operate{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 24rpx;
				
				.detail{
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
				
				.operate{
					margin: 0;
					border-radius: 32rpx;
					border: 2rpx solid #cccccc;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
			}
			
		}
		
	}

</style>
